<template>
	<div class="cardbox">
		<div class="define-calendar-head">
			<a-icon type="left" @click="preMonth" class="tab-month preMonth" />
			<span class="yearmonth"
				><span class="month"
					><span>{{ year }}年</span>{{ month }}月</span
				></span
			>
			<a-icon type="right" @click="nextMonth" class="tab-month nextMonth" />
		</div>
		<a-calendar :value="value" @select="select" mode="month" :header-render="headerRender">
			<ul slot="dateCellRender" slot-scope="value" class="events">
				<li v-for="(item, index) in getListData(value)" :key="index">
					<a-badge :status="filterDateStatus(value) ? 'success' : 'default'" :text="item.remark" />
				</li>
			</ul>
		</a-calendar>
		<addScheduleModal ref="addScheduleModal" @ok="getSchelduleList" @close="close"></addScheduleModal>
	</div>
</template>
<script>
//import moment from 'node_modules/moment/moment';
import moment from 'moment';
import addScheduleModal from './module/addScheduleModal.vue';
import { doctorManageapi } from '@/api/index.js';
export default {
	data() {
		return {
			api: doctorManageapi.scheduleUrl,
			year: moment(new Date()).format('YYYY'),
			month: moment(new Date()).format('MM'),
			day: moment(new Date()).format('DD'),
			value: '',
			listData: [],
			show: false,
			selectDay: '',
		};
	},
	components: { addScheduleModal },
	created() {
		//this.getSchelduleList();
	},
	watch: {
		globalOrgId: {
			handler(newval, oldval) {
				this.$nextTick(() => {
					this.getSchelduleList();
				});
			},
			immediate: true, //刷新加载 立马触发一次handler
			deep: true,
		},
	},
	methods: {
		getListData(value) {
			console.log("value.date()=>",value)
			let selectDate=moment(value).format('YYYY-MM-DD');
			console.log("selectDate=>",selectDate)
			let listData;
			/* let info = this.listData.find((item) => item.day == value.date()); */
			let info = this.listData.find((item) =>{
				let itemDate= moment(this.year+'-'+this.month+'-'+(item.day<10?('0'+item.day):item.day)).format('YYYY-MM-DD')
				console.log("itemDate=>",this.year+'-'+this.month+'-'+(item.day<10?('0'+item.day):item.day))
				return itemDate == selectDate
			});
			if (info && info.scheduleVos) {
				return info.scheduleVos;
			}
			return [];
		},
		select(info) {
			let list = this.getListData(info);
			console.log("list=》",JSON.stringify(list.length))
			this.selectDay = info;
			console.log('moment().isBefore(info)', moment().isBefore(info));
			console.log('moment().isAfter(info)', moment().isAfter(info));
			if (
				moment().isAfter(info) &&
				moment().format('YYYY-MM-DD') != moment(info).format('YYYY-MM-DD') &&
				list.length == 0
			) {
			/* if (
				(moment().isBefore(info)||list.length == 0)&&moment().format('YYYY-MM-DD') != moment(info).format('YYYY-MM-DD')
			) { */
				this.$message.info('没有日程安排');
			} else {
				this.show = true;
				this.$refs.addScheduleModal.show(info, list);
			}
		},

		//上一月
		preMonth() {
			this.month--;
			if (this.month < 1) {
				this.month = 12;
				this.year--;
			}
			this.value = moment(this.year + '-' + this.month + '-' + this.day);
			this.getSchelduleList();
		},
		//下一月
		nextMonth() {
			this.month++;
			if (this.month > 12) {
				this.month = 1;
				this.year++;
			}
			this.value = moment(this.year + '-' + this.month + '-' + this.day);
			this.getSchelduleList();
		},
		getSchelduleList() {
			this.$postAction(doctorManageapi.scheduleUrl.getList, {
				month: this.month,
				year: this.year,
				orgId:this.globalOrgId
			}).then((da) => {
				this.listData = da.data;
				if (this.show) {
					this.select(this.selectDay);
				}
			});
		},
		headerRender({ value, type, onChange, onTypeChange }) {
			return <div style={{ padding: '10px' }}></div>;
		},
		filterDateStatus(date) {
			let dateTime = moment(date).format('YYYY-MM-DD');
			let getTodayTime = moment().format('YYYY-MM-DD');
			console.log(getTodayTime);
			if (dateTime >= getTodayTime) {
				return true;
			} else {
				return false;
			}
		},
		close() {
			this.show = false;
			this.selectDay = '';
		},
	},
};
</script>
<style scoped>
.cardbox {
	overflow: auto;
	height: 100%;

	background: #fff;
	z-index: 6;
	box-shadow: 0px 4px 8px rgba(19, 29, 53, 0.05);
	border-radius: 8px;
	margin: 0;
	transition: all 0.3s;
	margin-top: 15px;
}
.events {
	list-style: none;
	margin: 0;
	padding: 0;
}
.events .ant-badge-status {
	overflow: hidden;
	white-space: nowrap;
	width: 100%;
	text-overflow: ellipsis;
	font-size: 12px;
}
.notes-month {
	text-align: center;
	font-size: 28px;
}
.notes-month section {
	font-size: 28px;
}
.define-calendar-head {
	text-align: center;
	font-size: 16px;
	margin-bottom: 20px;
	padding-top: 20px;

	.tab-month {
		font-size: 16px;
		cursor: pointer;
	}

	.yearmonth {
		width: 130px;
		display: inline-block;

		.month {
			margin-right: 5px;
		}
	}
}
</style>
